﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>JooQuery :: Code Documentation</title>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css"
        type="text/css" media="all">
    <style>
        .api ul { list-style-type: none; }
        .api pre { padding-left: 40px; }
        .api h4 { padding-left: 20px; }
        .pointer { cursor: pointer; }
        .square { height: 100px; width: 100px; }
        .bg-red { background-color: Red; }
        .bg-green { background-color: Green; }
        .toggle-off { display: none; }
        .toggle-on { display: block; }
        .block { margin: 5px; display: inline-block; }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
    <script type="text/javascript" src="scripts/jooquery/jquery/json2.js"></script>
    <script type="text/javascript" src="scripts/jooquery/jquery/livequery.js"></script>
    <script type="text/javascript" src="scripts/jooquery/core.js?v=1"></script>
    <script type="text/javascript" src="scripts/jooQuery/domdata.js?v=1"></script>
    <script type="text/javascript" src="scripts/jooquery/behaviors.js?v=1"></script>
    <script type="text/javascript" src="scripts/jooQuery/dependencies.js?v=1"></script>    
    <script type="text/javascript" src="scripts/jooQuery/storage.js?v=1"></script>

    <script type="text/javascript" src="scripts/jooQuery/testing.js?v=1"></script>
    <script type="text/javascript" src="scripts/jooQuery/testing/core/tests.js?v=1"></script>
    <script type="text/javascript" src="scripts/jooQuery/testing/behaviors/tests.js?v=1"></script>
    <script type="text/javascript" src="scripts/jooQuery/testing/dependencies/tests.js?v=1"></script>
    <script type="text/javascript" src="scripts/jooQuery/testing/domdata/tests.js?v=1"></script>
    <script type="text/javascript" src="scripts/jooQuery/testing/storage/tests.js?v=1"></script>
    <script type="text/javascript" src="scripts/jooQuery/testing/storage/tests.js?v=1"></script>
    <script type="text/javascript" src="scripts/jooQuery/testing/tests.js?v=1"></script>
</head>
<body>
    <div>
        <p style="float: left; margin: 0px;">
            <a href="CodeDocumentation.htm">Code Documentation</a> | <a href="WorkingBehaviors.htm">Working With Behaviors</a> | <a href="TestSpace.htm">Test Space</a>
            <br />
            <strong>Code Documentation</strong>
        </p>
        <p style="text-align: right; float: right; display: inline-block; margin: 0px;">
            <a href="http://www.tomdupont.net/">www.tomdupont.net</a><br />
            <a href="http://www.zachmayer.net/">www.zachmayer.net</a></p>
        <div style="clear: both;">
            <br />
        </div>
    </div>
    <div data-behavior="Docs.Tabs" data-init="true" style="display:none;">
		    <ul>
			    <li><a href="#jooquery">jooQuery</a></li>
			    <li><a href="#core">Core</a></li>
			    <li><a href="#Bootloader">Bootloader</a></li>
			    <li><a href="#domdata">DOM Data</a></li>
			    <li><a href="#dependencies">Dependencies</a></li>
			    <li><a href="#storage">Storage</a></li>
			    <li><a href="#testing">Unit Tests</a></li>                
		    </ul>
			
		    <div id="jooquery">
                <div style="float: right; margin-left: 30px;">
                    <h4>
                        <a href="#" onclick="$('#loggerPanel').msg('runTests');return false;">Check Unit Tests:</a></h4>
                    <p>
                        <textarea rows="12" cols="24" id="loggerPanel" data-behavior="Docs.Logger"></textarea></p>
                </div>
                <h3>
                    Simple, lightweight, object oriented closures for jQuery</h3>
                <p>
                    Even with so many different JavaScript frameworks available, it is still hard to
                    find one that fits all of my needs:</p>
                <ul>
                    <li>A simple standard for define classes.</li>
                    <li>A discoverable mechanism for marking up DOM elements.</li>
                    <li>A way to test my code.</li>
                </ul>
                <p>
                    Thus I reinvented the wheel and made jooQuery. It is a very lightweight set of extensions
                    for jQuery, that add the simple funtionality listed above.
                </p>
                <p>
                    The textarea to the right has a behavior attribute that declaratively specifies
                    which JavaScript class to apply to it. That class, Joo.ReadMe.Logger, is defined
                    using jooQuery core's namespace and defineClass methods. When the textarea renders
                    the Logger class runs all of the jooQuery unit tests, gathers their output by subscribing
                    to logging events, and then renders all of those results out into the textarea value
                    using jQuery.</p>
                <p>
                    It's simple, it's very small, and it's still jQuery.</p>
            </div>

            <div id="core" class="api">
                <p>
                    Adds polymorphic object orientation for closures to jQuery</p>
                <hr>
                <h3>
                    $.joo</h3>
                <h4>
                    $.class.define(declaration)</h4>
                <ul>
                    <li>@description Define a class.</li>
                    <li>@param {function} declaration</li>
                    <li>@return {function} Class constructor.</li>
                </ul>
                <pre>$.class.ns("Joo");

    Joo.Pet = $.class.define(function(name) {
	    var _name = name;
	    var _walkCount = 0;
	    var self = {
		    walk : function() {
			    _walkCount++;
			    return name
				    + " has been walked "
				    + _walkCount
				    + " time(s) today.";
		    };
	    };
	    return self;
    });

    var pet = new Joo.Pet("Taboo");
    pet.walk();
    // Taboo has been walked 1 time(s) today.
    </pre>
                <h4>
                    $.joo.extendClass(superclass, declaration)</h4>
                <ul>
                    <li>@description Define a class that inherits from a superclass.</li>
                    <li>@param {function} superclass</li>
                    <li>@param {function} declaration</li>
                    <li>@return {function} Child class constructor.</li>
                </ul>
                <pre>Joo.Cat = $.joo.extendClass(Joo.Pet, function(name) {
	                        var _speak = "Meow";
	                        var self = {
		                        speak: function() {
			                        return "The Cat says: " + _speak;
		                        };
	                        };
	                        return self;
                        });

                        var cat = new Joo.Cat("Linq");
                        cat.walk();
                        cat.speak();
                        </pre>
                <h4>
                    $.joo.isClass(object, type)</h4>
                <ul>
                    <li>@description Type checks an object.</li>
                    <li>@param {object} object</li>
                    <li>@param {function} type</li>
                    <li>@return {boolean} True if object is derivative of type.</li>
                </ul>
                <pre>var cat = new Joo.Cat("Linq");
                    $.joo.isClass(cat, Joo.Pet);
                    $.joo.isClass(cat, Joo.Cat);
                    </pre>
                <h4>
                    $.class.ns(namespace)</h4>
                <ul>
                    <li>@description Defines namespaces for object delcaration.</li>
                    <li>@param {string} namespace</li>
                </ul>
                <pre>$.class.ns("System.ComponentModel.DataAnnotations");</pre>
                <hr>
                <h3>
                    $.log
                </h3>
                <h4>
                    $.log.write(msg)</h4>
                <ul>
                    <li>@description Log a message.</li>
                    <li>@param {string} msg</li>
                </ul>
                <pre>$.log.write('Hello world!');</pre>
                <h4>
                    $.log.onWrite</h4>
                <ul>
                    <li>@property Event that fires when a log is written.</li>
                    <li>@type Joo.Event</li>
                </ul>
                <hr>
                <h3>
                    $.utilities</h3>
                <h4>
                    $.utilities.clone(source)</h4>
                <ul>
                    <li>@description Clone an object or array.</li>
                    <li>@param {object} source</li>
                    <li>@returns {object} Clone of source.</li>
                </ul>
                <pre>var myCow = {
	                    says: 'Moo',
	                    isBig: true
                    };
                    var yourCow = $.joo.clone(myCow);

                    var myStuff = [1, true, 'meh'];
                    var yourStuff = $.joo.clone(myStuff);
                    </pre>
                <h4>
                    $.utilities.createDelegate(fn, scope)</h4>
                <ul>
                    <li>@description reates a delegate that preserves scope.</li>
                    <li>@param {function} fn</li>
                    <li>@param {object} scope</li>
                    <li>@returns {function} delegate</li>
                </ul>
                <hr>
                <h3>
                    Joo.Event</h3>
                <ul>
                    <li>@class Handles Events</li>
                </ul>
                <pre>var event = new Joo.Event();

                    event.add(function(arg) {
	                    alert('Event was fired with: ' + arg);
                    });

                    event.fire('Stuff!');
                    // Event was fired with: Stuff!</pre>
                <h4>
                    Joo.Event()</h4>
                <ul>
                    <li>@constructor</li>
                </ul>
                <h4>
                    Joo.Event.add(delegate)</h4>
                <ul>
                    <li>@description Add a callback delegate.</li>
                    <li>@param {function} delegate</li>
                </ul>
                <h4>
                    Joo.Event.remove(delegate)</h4>
                <ul>
                    <li>@description Remove a callback delegate.</li>
                    <li>@param {function} delegate</li>
                </ul>
                <h4>
                    Joo.Event.fire(arguments)</h4>
                <ul>
                    <li>@description Fire event, invoking all registered delegates.</li>
                </ul>

                <hr>
                <h3>
                    Joo.Queue</h3>
                <ul>
                    <li>@class A simple FIFO queue for functions</li>
                </ul>
                <pre>var queue = new Joo.Queue();

                    queue.push(function(args) {
	                    alert('Queue function fired with: ' + arg);
                    });

                    queue.pop('Stuff!');
                    // Queue function fired with: Stuff!</pre>
                <h4>
                    Joo.Queue()</h4>
                <ul>
                    <li>@constructor</li>
                </ul>
                <h4>
                    Joo.Queue.push(fn)</h4>
                <ul>
                    <li>@description Add a function to the end of the queue.</li>
                    <li>@param {function} fn</li>
                </ul>
                <h4>
                    Joo.Queue.pop(args)</h4>
                <ul>
                    <li>@description Invoke the function at the top of the queue with arguments.</li>
                    <li>@param {misc} args</li>
                </ul>
                <h4>
                    Joo.Queue.queueLength()</h4>
                <ul>
                    <li>@description Gets the current queue length.</li>
                </ul>
            </div>
			
		    <div id="Bootloader" class="api">
			    <p>Dynamically loads scripts by name or by source</p>
                <hr />
                <h3>Joo.Bootloader</h3>
                <ul>
                    <li><h4>Public Members (declared in "self")</h4>
                        <ul>
                            <li><strong>requireByType(typeName, onLoaded)</strong>
                                <ul>                                    
                                    <li>typeName: The name & namespace of the class to load. Must correspond to file-system such that "Docs.Toggler" can be found at "Scripts/JooQuery/Docs/Toggler.js</li>
                                    <li>onLoaded: A function that will be invoked once the script has finished loading on the page.</li>
                                </ul>
                            </li>
                            <li><strong>require(src, onLoaded)</strong>
                                <ul>
                                    <li>src: The full or relative path to the script to be loaded.</li>
                                    <li>onLoaded: A function that will be invoked once the script has finished loading on the page.</li>
                                </ul>
                            </li>
                            <li><strong>caching(allowCache)</strong>
                                <ul>
                                    <li>allowCache: Sets the <strong>_allowCache</strong> flag (default true).</li>                                    
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li><h4>Private Members</h4>
                        <ul>
                            <li><strong>_loadListeners []</strong>
                                <ul>
                                    <li>An array of listeners attached to the onLoaded event for a particular script. Only used internally.</li>                                    
                                </ul>
                            </li>
                            <li><strong>_allowCaching bool</strong>
                                <ul>
                                    <li>Determines if the caching flag is true or false when a script is loaded. Applies to all scripts loaded with the bootloader.</li>                                    
                                </ul>
                            </li>
                            <li><strong>determineSeedValue()</strong>
                                <ul>
                                    <li>Gets a value to append to the end of the script URL that either prevents the browser from caching the script, or lets the browser use a script in cache.</li>                                    
                                </ul>
                            </li>
                            <li><strong>maskSrc(src)</strong>
                                <ul>
                                    <li>Removes a '~' from the begining of the "src" string passed to it.</li>                                    
                                </ul>
                            </li>
                            <li><strong>maskSrcForFetch(src)</strong>
                                <ul>
                                    <li>Sets the 'v' junk data as a querystring of the script "src" passed to it that lets a browser pull a previous version from cache, or forces it to load a new version.</li>                                    
                                </ul>
                            </li>
                            <li><strong>referenced(src)</strong>
                                <ul>
                                    <li>Determines if the script has already been added to the page.</li>                                    
                                </ul>
                            </li>
                            <li><strong>addListenerFor(path, onLoaded)</strong>
                                <ul>
                                    <li>Adds a listener function "onLoaded" to the _loadListeners array for the supplied "path"</li>                                    
                                </ul>
                            </li>
                            <li><strong>fireAllListenersFor(path)</strong>
                                <ul>
                                    <li>Finds the listener functions added to _loadListeners for the supplied "path" and invokes them.</li>                                    
                                </ul>
                            </li>
                            <li><strong>getTypeByString(typeString)</strong>
                                <ul>
                                    <li>Tries to get the loaded type from it's string name.</li>                                    
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
		    </div>
			
		    <div id="domdata" class="api">
			    <p>Adds ability to read data from DOM elements to jQuery.</p>
				
			    <h4>Example HTML</h4>
				
    <pre>&lt;div id=&quot;tester&quot; data-id=&quot;123&quot;&gt;
    &lt;span data-userid=&quot;456&quot;&gt;User: Tom&lt;/span&gt;
    &lt;span data-date=&quot;11/11/11&quot;&gt;Created: Friday&lt;/span&gt;
    &lt;span data-meta=&quot;{hasMeta:true, value:'meta meta!'}&quot;&gt;Has Meta: True&lt;/span&gt;
    &lt;/div&gt;</pre>
				
			    <h4>Example Script</h4>
    <pre>var data = $('#tester').domdata(data-, true);
    data.id; // 123
    data.userid; // 456
    data.date; // 11/11/11
    data.meta.hasMeta; // true
    </pre>
				
			    <hr>
			    <h3>$.domdata</h3>
				
			    <h4>$.domdata.read(el, attrPrefix, recursive)</h4>
			    <ul>
				    <li>@description Reads data from DOM element.</li>
				    <li>@param {HtmlElement} el</li>
				    <li>@param {string} attrPrefix</li>
				    <li>@param {boolean} recursive (Optional)</li>
				    <li>@returns {object}</li>
			    </ul>
				
			    <h4>(Extension) .domdata(attrPrefix, recursive)</h4>
			    <ul>
				    <li>@description Reads data from DOM element.</li>
				    <li>@param {string} attrPrefix</li>
				    <li>@param {boolean} recursive (Optional)</li>
				    <li>@returns {object}</li>
			    </ul>
				
		    </div>
			
		    <div id="dependencies" class="api">
			    <p>Adds dependency injection to jQuery</p>
				
			    <h4>Example</h4>
    <pre>Joo.Cat = $.class.define(function() {
    var self = {
        box : new Joo.Dependency('IBox'),
        doBusiness : function(a) { 
            self.box.poop();
        }
    };
    return self;
    });

    Joo.LitterBox = $.class.define(function() {
    var _isStinky = false;
    var self = {
        poop : function() { 
            _isStinky = true;
        },
        clean : function() {
            _isStinky = false;
        },
        isStinky : function() {
            return _isStinky;
        }
    };
    return self;
    });

    $.dependencies.register('IPet', Joo.Cat);
    $.dependencies.register('IBox', Joo.LitterBox);

    var cat = $.dependencies.resolve('IPet');
    cat.doBusiness();
    cat.box.isStinky(); // True</pre>
				
				
			    <hr>
			    <h3>$.dependencies</h3>
				
				
			    <h4>$.dependencies.register(alias, type, singleton)</h4>
			    <ul>
				    <li>@description Registers a type with the container.</li>
				    <li>@param {string} alias</li>
				    <li>@param {function} type</li>
				    <li>@param {boolean} singleton (Optional)</li>
				    </ul>
				
			    <h4>$.dependencies.resolve(alias)</h4>
			    <ul>
				    <li>@description Resolve a type by alias</li>
				    <li>@param {string} alias</li>
				    <li>@return {Object} Instance of request type.</li>
				    </ul>
				 
				 
			    <hr>
				    <h3>Joo.Dependency</h3>
			    <ul>
				    <li>@class Represents A Dependency</li>
			    </ul>
				
			    <h4>Joo.Dependency(alias)</h4>
			    <ul>
				    <li>@constructor</li>
				    <li>@param {string} alias</li>
			    </ul>
				
			    <h4>Joo.Dependency.resolve()</h4>
			    <ul>
				    <li>@description Resolves dependency, automatically invoked during parent resolution.</li>
			    </ul>

		    </div>
			
		    <div id="storage" class="api">
			    <p>Simplifies using client side storage with jQuery</p>
				
			    <h4>Example</h4>
    <pre>var key = 'ObjectKey';
    $.storage.local.setObject(key, {
    message: 'Hello World'
    });

    var object = $.storage.local.getObject(key);
    $.assert.isNotNull(object);
    $.assert.areEqual('Hello World', object.message);</pre>
				
			    <hr>
			    <h3>$.storage</h3>
				
				
			    <h4>$.storage.local</h4>
			    <ul>
				    <li>@property Local storage mechanism.</li>
				    <li>@type Joo.Storage</li>
			    </ul>
				
			    <h4>$.storage.session</h4>
			    <ul>
				    <li>@property Session storage mechanism.</li>
				    <li>@type Joo.Storage</li>
			    </ul>
				
				
			    <hr>
			    <h3>Joo.Storage</h3>
			    <ul>
				    <li>@class Wraps a storage mechanism</li>
			    </ul>
				
			    <h4>Joo.Storage(store)</h4>
			    <ul>
				    <li>@constructor</li>
				    <li>@param {object} store</li>
			    </ul>
				
			    <h4>Joo.Storage.getItem(key)</h4>
			    <ul>
				    <li>@description Gets an item by key.</li>
				    <li>@param {string} key</li>
				    <li>@return {string}</li>
			    </ul>
				
			    <h4>Joo.Storage.getObject(key)</h4>
			    <ul>
				    <li>@description Gets an object by key.</li>
				    <li>@param {string} key</li>
				    <li>@return {object}</li>
			    </ul>
				
			    <h4>Joo.Storage.setItem(key, value)</h4>
			    <ul>
				    <li>@description Sets an item by key.</li>
				    <li>@param {string} key</li>
				    <li>@param {string} value</li>
			    </ul>
				
			    <h4>Joo.Storage.setObject(key, value)</h4>
			    <ul>
				    <li>@description Sets an object by key.</li>
				    <li>@param {string} key</li>
				    <li>@param {object} value</li>
			    </ul>
				
			    <h4>Joo.Storage.removeItem(key, doGet)</h4>
			    <ul>
				    <li>@description Removes an item from storage.</li>
				    <li>@param {string} key</li>
				    <li>@param {boolean} doGet (Optional)</li>
				    <li>@return {string}</li>
			    </ul>
				
			    <h4>Joo.Storage.removeObject(key, doGet)</h4>
			    <ul>
				    <li>@description Removes an object from storage.</li>
				    <li>@param {string} key</li>
				    <li>@param {boolean} doGet (Optional)</li>
				    <li>@return {object}</li>
			    </ul>
				
			    <h4>Joo.Storage.clear()</h4>
			    <ul>
				    <li>@description Clears the storage.</li>
			    </ul>
				
		    </div>
			
		    <div id="testing" class="api">
			    <p>Adds unit testing capabilities to jQuery</p>
				
			    <h4>Example</h4>
    <pre>$.testing.register('jooQuery Testing', {
    'Are Equal' : function () {
        $.assert.areEqual('Equal', 'Equal');
    },
    'Not Equal' : function() {
        $.assert.notEqual('Yes', 'No');
    }
    });

    $.testing.runAll();</pre>
				
				
			    <hr>
			    <h3>$.testing</h3>
				
				
			    <h4>$.testing.register(fixture, tests)</h4>
			    <ul>
				    <li>@description Register a test fixture.</li>
				    <li>@param {string} fixture</li>
				    <li>@param {object} tests</li>
				    </ul>
				
			    <h4>$.testing.runAll(fixture, tests)</h4>
			    <ul>
				    <li>@description Run all test fixtures.</li>
				    </ul>
				
			    <h4>$.testing.runFixture(fixture)</h4>
			    <ul>
				    <li>@description Run a specific test fixture.</li>
				    <li>@param {string} fixture</li>
				    </ul>
				
			    <h4>$.testing.runMethod(fixture, name)</h4>
			    <ul>
				    <li>@description Run a specific test in a fixture.</li>
				    <li>@param {string} fixture</li>
				    <li>@param {string} name</li>
				    </ul>
				
				
			    <hr>
			    <h3>$.assert</h3>
				
				
			    <h4>$.assert.isTrue(value)</h4>
			    <ul>
				    <li>@description Assert value is true.</li>
				    <li>@param {boolean} value</li>
				    </ul>
				
			    <h4>$.assert.isFalse(value)</h4>
			    <ul>
				    <li>@description Assert value is false.</li>
				    <li>@param {boolean} value</li>
				    </ul>
				
			    <h4>$.assert.isNull(value)</h4>
			    <ul>
				    <li>@description Assert value is null.</li>
				    <li>@param {object} value</li>
				    </ul>
				
			    <h4>$.assert.notNull(value)</h4>
			    <ul>
				    <li>@description Assert value is not null.</li>
				    <li>@param {object} value</li>
				    </ul>
				
			    <h4>$.assert.areEqual(expected, actual, exact)</h4>
			    <ul>
				    <li>@description Assert values are equal.</li>
				    <li>@param {mixed} expected</li>
				    <li>@param {mixed} actual</li>
				    <li>@param {boolean} exact (Optional)</li>
				    </ul>
				
			    <h4>$.assert.notEqual(expected, actual, exact)</h4>
			    <ul>
				    <li>@description Assert values are not equal.</li>
				    <li>@param {mixed} expected</li>
				    <li>@param {mixed} actual</li>
				    <li>@param {boolean} exact (Optional)</li>
				    </ul>
				
			    <h4>$.assert.fail(msg)</h4>
			    <ul>
				    <li>@description Assert a failure.</li>
				    <li>@param {string} msg</li>
				    </ul>
				
		    </div>
	    </div>
</body>
</html>
